<template>
    <div>
        <h1>6 Table</h1>
        <h2>6.1 创建</h2>
        <p>原生table</p>
        </br>
        <table border="1px" text-align="center">
            <th v-for="header in tableHeader">
            <td>{{ header }}</td>
            </th>
            <tr v-for="data in tableData" :key="data.id">
                <td>{{ data.id }}</td>
                <td>{{ data.name }}</td>
                <td>{{ data.age }}</td>
                <td>{{ data.email }}</td>
            </tr>
        </table>
        </br>
        <p>element-ui table</p>
        </br>
        <ol>
            <li>el-table 使用 :data 绑定数据【对象数组】</li>
            <li>el-table-column 使用prop绑定data对象数组中每个对象的属性</li>
        </ol>
        <el-table :data="tableData" border>
            <el-table-column width="200px" align="center" header-align="left" label="id" prop="id" :resizable="false">

            </el-table-column>
            <el-table-column label="name" prop="name">

            </el-table-column>
            <el-table-column label="age" prop="age" sortable :sort-method="sorts">

            </el-table-column>
            <el-table-column width="800px" label="email" prop="email" resizable>
            </el-table-column>
        </el-table>
        <h2>6.2 el-table-column属性</h2>
        <p> el-table-column属性大体上分为4类：数据提取，数据表现，排序sort，过滤filter </p>
    </div>
</template>
<script>
export default {
    name: "Table",
    data() {
        return {
            // native data
            tableHeader: ["id", "name", "age", "email"],
            // element-ui data
            tableData: [
                { id: "10030421", name: "Tom", age: 23, email: "123@123.com" },
                { id: "10030424", name: "David", age: 25, email: "1233@123.com" },
                { id: "10030425", name: "Dave", age: 21, email: "12334@123.com" },
                { id: "10030428", name: "Helen", age: 18, email: "1233ff@123.com" },
                { id: "10030419", name: "Jack", age: 19, email: "1233e@123.com" },
                { id: "10030408", name: "Lucy", age: 22, email: "12334rt@123.com" },
            ]
        }
    },
    method: {
        sorts(a, b) {
            return a.age - b.age;
        }
    }
}
</script>

<style scoped>
#div {
    width: 1020px;
}
</style>